﻿;
(function($) {
    $.tagManager = function(el, options) {
        var plugin = this;
        var defaults = { containerSelector: '', hiddenFieldSelector: '' };
        plugin.settings = { };

        var tags = [];
        var containerSelector;
        var hiddenFieldSelector;

        var init = function() {
            plugin.settings = $.extend({ }, defaults, options);
            plugin.el = el;
            containerSelector = $(plugin.settings.containerSelector);
            hiddenFieldSelector = $(plugin.settings.hiddenFieldSelector);

            var autocompleteParams =
                {
                    source: function(request, response) {
                        var ajaxCallParams =
                            {
                                url: "/Question/TagsLookup/",
                                dataType: 'json',
                                data: { inputText: el.val(), count: 10 },
                                success: function(ajaxData) { response(ajaxData); }
                            };
                        $.ajax(ajaxCallParams);
                    },
                    minLength: 2,
                    select: function(event, ui) {
                        if (ui.item) {
                            plugin.addTag(ui.item.value);
                            plugin.el.val('');
                        }

                        return false;
                    },
                    change: function(evt) {
                        var val = plugin.el.val();

                        if (val.length >= 2) {
                            plugin.addTag(val);
                            plugin.el.val('');
                            evt.preventDefault();
                            return false;
                        }

                        return true;
                    }
                };

            el.autocomplete(autocompleteParams);

            var onKeyPress = function(event) {
                if (event.which !== 13) {
                    return;
                }
                
                event.preventDefault();
                event.stopPropagation();

                var autocompleteWidget = $(".ui-autocomplete:visible");
                var val = plugin.el.val();

                if (autocompleteWidget.length === 0 && val.length >= 2) {
                    plugin.addTag(val);
                    plugin.el.val('');
                }
            };

            el.keypress(onKeyPress);
        };

        plugin.addTag = function(tag) {
            if (tag) {
                tags.push(tag);
                updateControlHierarchy();
            }
        };

        plugin.removeTag = function(tag) {
            if (tag) {
                tags = jQuery.grep(tags, function(v) { return v != tag; });
                updateControlHierarchy();
            }
        };

        var updateControlHierarchy = function() {
            hiddenFieldSelector.val(tags.join(' '));

            containerSelector.empty();
            var ul = document.createElement('ul');
            $(containerSelector).append(ul);

            $.each(tags, function(index, value) {
                var element = document.createElement('li');
                var a = document.createElement('a');
                a.appendChild(document.createTextNode('X'));
                element.appendChild(a);
                var span = document.createElement('span');
                span.appendChild(document.createTextNode(value));
                element.appendChild(span);
                $(ul).append(element);

                $(a).click(function() {
                    var text = $(this).next('span').text().trim();
                    plugin.removeTag(text);
                });
            });
        };

        init();
    };
})(jQuery);